<template>
  <div style="padding: 20px">
    <div class="msg-task-div">
      <h3>任务消息</h3>
      <div @click="getTaskTableList" :class="checkedItem==0&&switchTable==1?'checked':''" data-type="0">
        <span style="background-color:#242424;"></span>
        全部消息
      </div>
      <div @click="getTaskTableList" :class="checkedItem==1&&switchTable==1?'checked':''" data-type="1">
        <span style="background-color: #ff4848;"></span>
        未读消息
      </div>
      <div @click="getTaskTableList" :class="checkedItem==2&&switchTable==1?'checked':''" data-type="2">
        <span style="background-color: #9afd95;"></span>
        已读消息
      </div>
      <div @click="getTaskTableList" :class="checkedItem==3&&switchTable==1?'checked':''" data-type="3">
        <span style="background-color: #b1b1b1;"></span>
        已处理消息
      </div>
    </div>
    <div class="msg-task-div">
      <h3>站内消息</h3>
      <div @click="getInsideTableList" :class="checkedItem==0&&switchTable==2?'checked':''" data-type="0">
        <span></span>
        收到的消息
      </div>
      <div @click="getInsideTableList" :class="checkedItem==1&&switchTable==2?'checked':''" data-type="1">
        <span></span>
        未读消息
      </div>
      <div @click="getInsideTableList" :class="checkedItem==2&&switchTable==2?'checked':''" data-type="2">
        <span></span>
        已读消息
      </div>
      <div @click="getInsideMySendTableList" :class="switchTable==3?'checked':''">
        <span></span>
        我发送的消息
      </div>
    </div>

    <Row>
      <i-col span="18" class="msg_right">

        <BaseTable v-if="switchTable==1"
          ref="baseTable"
          size="small"
          :action="action.taskPage"
          :columns="taskColumns"
          :isLoading="false"
          @handleView="publicUpdateData"
        />
        <div :style="switchTable==2?'display:block':'display:none'">
          <BaseTable
            ref="insideTable"
            size="small"
            :action="action.insidePage"
            :columns="insideColumns"
            :isLoading="false"
            :isInitRequest="false"
            @handleView="openInsideDialog"
          />
        </div>
      <div  :style="switchTable==3?'display:block':'display:none'">
          <BaseTable
            ref="insideMySendTable"
            size="small"
            :action="action.insidePageMySend"
            :columns="insideColumns"
            :isLoading="false"
            :isInitRequest="false"
            @handleView="openInsideDialog"
          />
        </div>
        <Drawer
          :title="viewParams.title"
          v-model="viewParams.flag"
          :width="35"
          draggable
          @on-visible-change="publicVisibleChange"
        >
          <MsgTaskView
            v-if="viewParams.flag"
            :type="3"
            :moduleId="id"
            @closeView="publicCloseView"
          />
        </Drawer>
        <Drawer
          title="查看站内消息"
          v-model="dialogMsgInsideForm.isShow"
          :width="35"
          draggable
          @on-visible-change="publicVisibleChange"
        >
          <MsgInsideForm
            v-if="dialogMsgInsideForm.isShow"
            :type="3"
            :moduleId="id"
            @closeView="closeInsideDialog"
          />
        </Drawer>
      </i-col>
    </Row>

  </div>
</template>
<script>
import { tableMixin } from '../../mixin'
import API_KEY from '../../api'
export default {
  name: 'MsgTask',
  mixins: [tableMixin],
  data () {
    return {
      searchTaskForm: {
        msgType: '',
        msgStatus: ''
      },
      searchInsideForm: {
        msgType: '',
        msgStatus: ''
      },
      viewParams: {
        title: '',
        flag: false
      },
      switchTable: 1,
      checkedItem: 0,
      dialogMsgInsideForm: {
        isShow: false
      },
      id: '',
      suffix: '任务消息',
      menuCode: 'msg-task',
      action: {
        taskPage: API_KEY.msgTask.page,
        insidePage: API_KEY.msgInside.page,
        insidePageMySend: API_KEY.msgInside.pageMySend
      },
      taskColumns: [
        {
          title: '消息标题',
          minWidth: 50,
          key: 'title'
        }, {
          title: '消息内容',
          key: 'text'
        }, {
          title: '时间',
          width: 170,
          key: 'gmtCreate'
        }, {
          title: '类型',
          minWidth: 60,
          key: 'msgType'
        }, {
          title: '状态',
          tooltip: true,
          minWidth: 50,
          key: 'msgStatus',
          render: (h, params) => {
            const msgStatus = ['未读', '已读', '已处理']
            return h('span', msgStatus[params.row.msgStatus])
          }
        }, {
          title: '操作',
          fixed: 'right',
          align: 'center',
          width: '150px',
          slot: 'action'
        }
      ],
      insideColumns: [
        {
          title: '消息标题',
          minWidth: 50,
          key: 'title'
        }, {
          title: '发送时间',
          width: 170,
          key: 'gmtCreate'
        }, {
          title: '接收人',
          minWidth: 60,
          key: 'receiveUser'
        }, {
          title: '发送人',
          minWidth: 60,
          key: 'sender'
        }, {
          title: '状态',
          tooltip: true,
          minWidth: 50,
          key: 'msgStatus',
          render: (h, params) => {
            const msgStatus = ['未读', '已读', '已处理']
            return h('span', msgStatus[params.row.msgStatus])
          }
        }, {
          title: '操作',
          fixed: 'right',
          align: 'center',
          width: '150px',
          slot: 'action'
        }
      ]
    }
  },
  components: {
    BaseTable: () => import('@/components/view-ui/BaseTable.vue'),
    MsgTaskView: () => import('./MsgTaskView'),
    MsgInsideForm: () => import('./MsgInsideForm')
  },
  mounted () {

  },
  methods: {
    /**
    * 查询消息任务列表
    * @author Enzo
    * @date 2020-9-29
    */
    getTaskTableList ({ currentTarget }) {
      this.switchTable = 1
      this.checkedItem = currentTarget.dataset.type
      if (this.checkedItem > 0) {
        this.searchTaskForm.msgStatus = this.checkedItem - 1
      } else {
        this.searchTaskForm.msgStatus = ''
      }
      this.$refs.baseTable.getData(this.searchTaskForm)
    },
    /**
    * 查询站内消息列表
    * @author Enzo
    * @date 2020-9-29
    */
    getInsideTableList ({ currentTarget }) {
      this.switchTable = 2
      this.checkedItem = currentTarget.dataset.type
      this.action.insideCurrentPage = this.action.insidePage
      if (this.checkedItem > 0) {
        this.searchInsideForm.msgStatus = this.checkedItem - 1
      } else {
        this.searchInsideForm.msgStatus = ''
      }
      this.$refs.insideTable.getData(this.searchInsideForm)
    },
    getInsideMySendTableList ({ currentTarget }) {
      this.switchTable = 3
      this.searchInsideForm.msgStatus = ''
      this.$refs.insideMySendTable.getData(this.searchInsideForm)
    },
    /**
    * 打开站内消息对话框
    * @author Enzo
    * @date 2020-9-29
    */
    openInsideDialog (row = {}) {
      this.id = row.id
      this.dialogMsgInsideForm.isShow = true
    },
    /**
    * 关闭站内消息对话框
    * @author Enzo
    * @date 2020-9-29
    */
    closeInsideDialog () {
      this.dialogMsgInsideForm.isShow = false
    }
  }
}
</script>
<style scoped="scoped" lang="scss">
  .msg-task-div {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 50px;
    h3 {
      display: inline-block;
    }
    div {
      margin-left: 50px;
      border: 1px solid #bdbdbd;
      border-radius: 25px;
      padding: 5px 10px;
      display: inline-block;
      cursor: pointer;
      span {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
      }
    }
  }
  .msg-task-dl{
    .checked{
      color: red;
    }
  }
  dl{
    dd{
      margin-left: 10px;
    }
  }
</style>
